<template>
	<view class="main">
		<view class="title">
			<view class="title_font">
				<text>预约详情</text>
				<view class="line"></view>
			</view>
			<view class="orderStatus">
				
			</view>
		</view>
		<view class="detail">
			<view class="item">
				<view class="font">
					<text>预约基地</text>
				</view>
				<view class="content">
					<text>{{v.nameb}}</text>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>预约时段</text>
				</view>
				<view class="content" v-for="(item,index) in  v.time" :key='index'>
					<view >
						<text>{{item.timeSlot}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>预约用户</text>
				</view>
				<view class="content">
					<view class="identity">
						<view>
						    {{v.status=='0'?'学生': ''}}
						    {{v.status=='1'?'老师': ''}}
						    {{v.status=='2'?'社畜': ''}}
						</view>
						<text>{{v.userName}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>联系电话</text>
				</view>
				<view class="content">
					<text>{{v.telephone}}</text>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>用户单位</text>
				</view>
				<view class="content">
					<text>{{v.siteAddress}}</text>
				</view>
			</view>
		</view>
		<u-line color="info" border-style="dashed" />
		<u-line color="info" border-style="dashed" />
		<view class="detail payStatus">
			<view class="item">
				<view class="font">
					<text>下单时间</text>
				</view>
				<view class="content" v-for="(item,index) in  v.time" :key='index'>
					<view >
						<text>{{item.timeSlot}}</text>
					</view>
				</view>
			</view>
			<template >
				<view class="item">
					<view class="font">
						<text>支付方式</text>
					</view>
					<view class="content">
						<text>微信支付</text>
					</view>
				</view>
				<view class="item">
					<view class="font">
						<text>支付时间</text>
					</view>
						<view class="content" >
							<view >
								<text>{{v.siteinfo}}</text>
							</view>
						</view>
				</view>
			</template>
			<view class="payF">
				<view class="title">
					<text>收费金额</text>
				</view>
				<view class="pay_content">
					<view class="total">
						<text class="icon">￥</text>
						<text class="num">0</text>
					</view>
					<text class="pay_status">0</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				v:{}
			}
		},
		onLoad(option){
			console.log(JSON.parse(option.data));
			this.v=JSON.parse(option.data)
		},
		// computed:{
		// 	userType(){
		// 		switch (this.item.userType){
		// 			case "1":
		// 				return "老师"
		// 				break;
		// 			case "2":
		// 				return "社会人士"
		// 				break;	
		// 			default:
		// 				return "学生"
		// 				break;
		// 		}
		// 	},
		// 	orderStatus(){
		// 		switch (this.item.userType){
		// 			case "CANCEL":
		// 				return "用户取消"
		// 				break;
		// 			case "PAID":
		// 				return "已支付"
		// 				break; 
		// 			default:
		// 				return "未支付"
		// 				break;
		// 		}
				
		// 	}
		// },
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.main{
		box-sizing: border-box;	
		margin: 24rpx 30rpx 0 30rpx;
		padding: 27rpx 24rpx 54rpx 24rpx;
		background-color: #fff;
		position: relative;
		.title{
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 82rpx;
			.orderStatus{
				box-sizing: border-box;
				padding: 6rpx 0rpx;
				background-color: #FFB535;
				border-radius: 0 14rpx 0 14rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				width: 104rpx;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		.title_font{
			width: 232rpx;
			margin: 0 auto;
			.line{
				width: 232rpx;
				height: 10rpx;
				border-radius: 12rpx;
				background: #F4333C;
			}
		}
		
	}
	.detail{
		
		.item{
			width: 100%;
			padding: 20rpx 0 30rpx;
			display: flex;
			font-size: 30rpx;
			font-family: PingFang SC;
			justify-content: space-between;
			.font{
				color: #999999;
				padding-right: 4rpx;
			}
			.content{
				color: #333333;
			}
		}
	}
	.payStatus{
		box-sizing: border-box;
		padding-top: 48rpx;
	}
	.payF{
		width: 100%;
		padding: 20rpx 0 30rpx;
		display: flex;
		font-size: 30rpx;
		font-family: PingFang SC;
		justify-content: space-between;
		height: 88rpx;
		box-sizing: border-box;
		.title{
			font-size: 28rpx;
			color: #333333;	
		}
		.pay_content{
			display:flex;
		}
		.total{
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #F4333C;
			.icon{
				font-size: 24rpx;
			}
			.num{
				font-size: 40rpx;
			}
		}
		.pay_status{
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #35B572;
			line-height: 56rpx;
			margin-left: 21rpx;
		}
	}
	.identity{
		display: flex;
		align-items: center;
		>view{
			width: 92rpx;
			height: 40rpx;
			background: #61ABFF;
			border-radius: 5rpx;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		>text{
			font-size: 30rpx;
			color: #333333;
			margin-left: 10rpx;
		}
	}
</style>
